import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,Picker,Input } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import './join.scss'

import lbicon from '../mall/images/lbicon.png'
import lbicon2 from '../mall/images/lbicon2.png'


export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
        regionSel:'',
        gradeSel:'',
        jmtype:'',
        shopType:"个体商家",
        dealerType:2,
        list:[],
        regionList:[[],[],[],[]],
        value:[0,0,0,0],
        ischange:0,
        legalperson:'',
        legalpersonmobile:'',
        gradeSettingId:'',
        khf:1,
        isshowkhf:0,
        gradeSettingName:'',
        byfrom:'',
        checkList:0,
    }
  } 
  config = {
    navigationBarTitleText:'加载中'
  }
	
  componentWillMount () { 
    var _this =this;
    var name =this.$router.preload.name;
    var type =this.$router.params.type;
    var byfrom =this.$router.params.byfrom;
   	if(type==1){
   		var jmtype='加盟'+ name
   	}
   	else if(type==2){
      var jmtype='加盟'+ name
   	}
   	else{
   		var jmtype='加盟'+ name
   	}
    Taro.setNavigationBarTitle({
      title:jmtype
    })
    this.setState({
	    gradeSettingId:type,
      jmtype:jmtype,
      byfrom: byfrom
	  })
    this.getData();
    this.getuserinfo()
  }
  componentDidShow () {
    
  }
  componentDidUpdate () {
  }
  getuserinfo(){
  	var dateinfo=Taro.getStorageSync('dateinfo')
  	if(dateinfo){
  		var url='/user/getUserInfo'
  		var _this=this;
  		CommonJs.ajaxRequest(url,'','GET',function(ret){
  			if(ret.content){
	  			_this.setState({
		        legalperson: ret.content.nickName,
		        legalpersonmobile:ret.content.mobile
		      })
	  		}
  		})
  	}
  	else{
  		Taro.showToast({
			  title:'请先登录',
			  icon: 'none',
			  duration: 2000 
			})
  		setTimeout(function(){
  			CommonJs.open('/pages/login/login');
  		},1000)
  	}
  }
  getData(){
    var _this = this
    var regionList = _this.state.regionList
    var list=_this.state.list
    var url='/shop/papi/v1.9/region/findByParent/144' ;
    CommonJs.ajaxRequest(url,'','GET',function(res){
      list[0] = res.data
      var arr = res.data
      regionList[0]=[];
      for(var i= 0; i< arr.length;i++){
        regionList[0].push(arr[i].name)
      }
      _this.setState({
        list: list,
        ischange:1,
        regionList:regionList,
      })
  
      _this.getDataul(arr[0].id)
    })
  }

  getDataul(id){
    var _this = this
    var regionList = _this.state.regionList
    var list=_this.state.list
    var url='/shop/papi/v1.9/region/findByParent/' + id  ;
    CommonJs.ajaxRequest(url,'','GET',function(res){
      list[1] = res.data
      var arr = res.data
      regionList[1]=[]
      for(var i= 0; i< arr.length;i++){
        regionList[1].push(arr[i].name)
      }
      _this.setState({
        list: list,
        regionList:regionList
      })
     _this.getDatali(arr[0].id)
    })
  }

  getDatali(id){
    var _this = this
    var regionList = _this.state.regionList
    var list=_this.state.list
    var url='/shop/papi/v1.9/region/findByParent/' + id  ;
    CommonJs.ajaxRequest(url,'','GET',function(res){
      list[2] = res.data
      var arr = res.data
      regionList[2]=[]
      for(var i= 0; i< arr.length;i++){
        regionList[2].push(arr[i].name)
      }
      _this.setState({
        list: list,
        regionList:regionList
      })
     _this.getDatali4(arr[0].id)
    })
  }
  getDatali4(id){
    var _this = this
    var regionList = _this.state.regionList
    var list=_this.state.list
    var url='/shop/papi/v1.9/region/findByParent/' + id;
    CommonJs.ajaxRequest(url,'','GET',function(res){
      list[3] = res.data
      var arr = res.data
      regionList[3]=[]
      for(var i= 0; i< arr.length;i++){
        regionList[3].push(arr[i].name)
      }
      _this.setState({
        list: list,
        regionList:regionList
      })
    })
  }

  onRegionChange(e){
    
    var list = this.state.list
    var value = this.state.value
    var column = e.detail.column
    var evalue = e.detail.value

    if(column == 0){
      var id=list[0][evalue].id
      this.getDataul(id)
      value[0]=evalue
      this.setState({
			  value:value
			})
    }
    else if(column == 1){
    	var id=list[1][evalue].id
      this.getDatali(id)
      value[1]=evalue
      this.setState({
			  value:value
			})
    }
    else if(column == 2){
    	var id=list[2][evalue].id
      this.getDatali4(id)
      value[2]=evalue
      this.setState({
			  value:value
			})
    }
    else if(column == 3){
    	value[3]=evalue
    	this.setState({
			  value:value
			})
    }
    
  }
  
  handleChange(name,e){
    var _this = this
  	let value=e.target.value;
  	this.setState({
      [name]: value
    });
  }
  sure(){
  	//this.paynow();
	var vm=this.state;
	var list=vm.list;
	var value=vm.value;
  
	  	if(vm.legalpersonmobile=="" || vm.legalpersonmobile==null){
			CommonJs.msg('输入的手机号不能为空');
	        return false;   
		}
		
		if(vm.legalperson=="" || vm.legalperson==null){
			CommonJs.msg('法人不能为空');
			return false;
    }
    if(this.state.checkList==1){
      Taro.showToast({
       title:'请先阅读并同意用户协议和隐私条款',
       icon: 'none',
       duration: 2000
     })
     return false;
  }
	  var date={
	    	dealerType:vm.dealerType,
	    	legalperson:vm.legalperson,
	    	legalpersonmobile:vm.legalpersonmobile,
	    	regionId:list[2][value[2]].id,
	    	proxyDealerId:1,
	    	gradeSettingId:vm.gradeSettingId,
	    }
	  var _this=this;
		var url="/hxsaccount/dealerJoinUs";
		CommonJs.ajaxRequest(url,date,'GET',function(ret){
			if(ret.code!=300){
				var url1='/bond/getBondByUserId'
				CommonJs.ajaxRequest(url1,'','GET',function(res){
					_this.setState({
			      khf: res.content.basesAmount,
			      gradeSettingName:res.content.gradeSettingName,
			      isshowkhf:1
			    });
				})
			}
			else{ 
				Taro.showModal({
				  title: '提示',
				  content:ret.msg,
				  success: function (res) {
				    
				  }
				})
			}
		},'','noret')
  }
	closetc(){
		this.setState({
      isshowkhf:0
    });
  }
	paynow(){
		if(this.state.khf>0){
			var url='/pages/join/pay?monery='+this.state.khf+"&byfrom="+this.state.byfrom + '&jmtype=' + this.state.gradeSettingId
			CommonJs.open(url);
		}
		else{
			Taro.showToast({
			  title:'开通成功',
			  icon: 'none',
			  duration: 2000 
			})
  		setTimeout(function(){
  			CommonJs.open('/pages/xijia/grouplist');
  		},1000)
		}
  }
  checkBtn(val){
	  this.setState({
		checkList:val
	  });
  }
  read(){
		CommonJs.openTo('/pages/login/read')
  }
  onchange() {
    var _this = this;
    Taro.showActionSheet({
      itemList: ["个体商家", "连锁商家"],
      success: function(res) {
        if (res.tapIndex == 0) {
          var dealerType = 2;
          var shopType = "个体商家";
        } else {
          var dealerType = 3;
          var shopType = "连锁商家";
        }
        _this.setState({
          dealerType: dealerType,
          shopType: shopType,
        });
      },
    });
  }
  render () {
    var list=this.state.list
    var value=this.state.value
    const check = this.state.checkList
    return (
    	<View className='page'>
        <View className='yslist'>
          <View className='page-shop'>
                <View className='shop-type'>
                <Text>商家类型</Text>
                </View>
                <View className='shop-types' onClick={this.onchange.bind(this)}>
                {this.state.shopType}
                </View>
          </View>

          <View className='page-shop'>
          <View className='shop-type'>
              <Text>入住人姓名</Text>
          </View>
          <View className='shop-input'>
            <Input type='text' placeholder='输入法人姓名' value={this.state.legalperson} focus onChange={this.handleChange.bind(this,'legalperson')} />
          </View>
          </View>

          <View className='page-shop'>
          <View className='shop-type'>
              <Text>入住人手机号码</Text>
          </View>
          <View className='shop-input'>
            <Input type='text' placeholder='输入法人手机号码' value={this.state.legalpersonmobile} focus onInput={this.handleChange.bind(this,'legalpersonmobile')}/>
          </View>
          </View>


          <View className='page-shop' >
          <Picker mode='multiSelector'  range={this.state.regionList}  onColumnChange={this.onRegionChange.bind(this)}>
                <View className='shop-type'>
                <Text>选择区域</Text>
                </View>
                <View className='shop-types'>
                {list[2][value[2]].name ? list[0][value[0]].name+'-'+list[1][value[1]].name+'-'+list[2][value[2]].name : '加载中'}
                {list[3][value[3]].name?list[3][value[3]].name:''}
                </View>
                </Picker>
          </View>


          <View className='page-shop' >
                <View className='shop-type'>
                <Text>加盟类型</Text>
                </View>
                <View className='shop-types'>
                  {this.state.jmtype}
                </View>
          </View>

        </View>

        <View className='shop-btn'>
            <Button className='shopbtn'  onClick={this.sure.bind(this)} >确认</Button>
        </View>

        <View className='type-section'>
					<View className='type-img'>
						<Image className='type-imgs' mode='widthFix' onClick={this.checkBtn.bind(this,1)} style={check==0?'':'display:none'} src={lbicon}></Image>
						<Image className='type-imgs' mode='widthFix' onClick={this.checkBtn.bind(this,0)} style={check==1?'':'display:none'} src={lbicon2}></Image>
						</View>
						<View className='type-text' onClick={this.read.bind(this)}>我已阅读并同意"用户协议和隐私条款"</View>
				  </View>

				<View className='ptc' style={this.state.isshowkhf?'':'display:none'}>
        	<View className='ptc-con'>
        		<View className='ptc-tit'>操作提示</View>
        		<View className='ptc-main'>加盟{this.state.gradeSettingName}需要支付{this.state.khf}元开户费</View>
        		<View className='ptc-btn'>
        			<View className='btn-cancle' onClick={this.closetc.bind(this)}>取消</View>
        			<View className='btn-sure' onClick={this.paynow.bind(this)}>确定</View>
        		</View>
        	</View>
			
				</View>
      </View>
    )
  }
}
